<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            box-sizing: border-box;
        }

        tr:first-child {
            font-weight: 700;
            font-size: 20px;

        }

        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <script>


        // 使用构造函数创建一个自定义对象，通过自定义对象生成指定行数、列数、宽度和高度的表格
        var data = [
            { StudentNumber: "学号", Chinese: "语文", Math: "数学", English: "英语", TotalScore: "总成绩", Comment: "评价" },
            { StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, TotalScore: "", Comment: "" },
            { StudentNumber: 2022004, Chinese: 78, Math: 99, English: 91, TotalScore: "", Comment: "" },
            { StudentNumber: 2022005, Chinese: 107.5, Math: 97, English: 70, TotalScore: "", Comment: "" },
            { StudentNumber: 2022006, Chinese: 112, Math: 61, English: 92, TotalScore: "", Comment: "" },
            { StudentNumber: 2022007, Chinese: 101, Math: 79, English: 104, TotalScore: "", Comment: "" },
            { StudentNumber: 2022008, Chinese: 71, Math: 72, English: 105, TotalScore: "", Comment: "" },
            { StudentNumber: 2022009, Chinese: 56, Math: 68, English: 61, TotalScore: "", Comment: "" },
            { StudentNumber: 2022010, Chinese: 98, Math: 83, English: 77, TotalScore: "", Comment: "" }
        ];

        console.log(data);
        function Achievement(data) {
            this.data = data;
        }

        Achievement.prototype.outputScore = function () {
            let data = this.data;

            for (let i = 1; i < data.length; i++) {
                data[i].TotalScore = data[i].Chinese + data[i].Math + data[i].English
                var stuscore = (data[i].TotalScore / 3).toFixed(1);
                if (stuscore >= 110) {
                    data[i].Comment = "A";
                } else if (stuscore >= 100) {
                    data[i].Comment = "B";
                } else if (stuscore >= 90) {
                    data[i].Comment = "C";
                } else if (stuscore >= 72) {
                    data[i].Comment = "D";
                } else {
                    data[i].Comment = "E";
                }
            }
            // console.log(data);
            this.scoreSort(data, 'TotalScore');
        }

        Achievement.prototype.scoreSort = function (data, subject) {
            data.sort(function (a, b) {
                // console.log(a, b);
                return b[subject] - a[subject];
            })
        }

        var score = new Achievement(data);
        score.outputScore();
        var newData = score.data;
        console.log(newData);



        function Table(data, width, height) {
            //设置对象属性
            this.data = data;
            this.width = width;
            this.height = height;
        }
        Table.prototype.border = 1;//有边框

        //导入表格数据
        Table.prototype.createTable = function () {
            var str = "";//定义字符串
            str = "<table align='center'border='" + this.border + "'cellspacing='0'" + "width='" + this.width + "'>";
            var bgcolor;
            for (var r = 0; r < data.length; r++) {
                if (r == 0) {
                    bgcolor = "skyblue";
                } else {
                    bgcolor = "#ddd";
                }
                str += "<tr bgcolor='" + bgcolor + "'>";

                for (let c in data[r]) {
                    str += "<td height='" + this.height + "'>" + data[r][c] + "</td>";
                }
                str += "</tr>";
            }

            str += "</table>";
            return str;
        }

        //空表格

        function NullTable(row, col, width, height) {
            //设置对象属性
            this.row = row;
            this.col = col;
            this.width = width;
            this.height = height;
        }
        NullTable.prototype.border = 1;//有边框
        NullTable.prototype.createNullTable = function () {
            var str = "";//定义字符串
            str = "<table align='center'border='" + this.border + "'cellspacing='0'" + "width='" + this.width + "'>";
            var bgcolor;
            for (var i = 1; i <= this.row; i++) {
                if (i == 1) {
                    bgcolor = "skyblue";
                } else {
                    bgcolor = "#ddd";
                }
                str += "<tr bgcolor='" + bgcolor + "'>";
                for (var j = 1; j <= this.col; j++) {
                    str += "<td height='" + this.height + "'></td>";
                }
                str += "</tr>";
            }

            str += "</table>";
            return str;
        }

        var table1 = new Table(newData, 800, 30);
        document.write(table1.createTable());//在空表格中导入表格数据

        document.write("<p>");

        var table2 = new NullTable(5, 6, 800, 30);
        document.write(table2.createNullTable());//自动生成空表格


    </script>
</body>

</html>